<template>
  <div class="raidersBox">
		<!-- 搜索栏 -->
        <div class="invite-sub">
            <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
            <span class="inviteSearch">
              <input type="text" placeholder="搜索">
              <img src="../../static/image/sousuo.png" alt="">
            </span>
        </div>
        <!-- 搜索栏 end-->

      <!-- nav -->
      <userNav></userNav>
      <!-- nav end-->
        <!-- mainBox -->
        <div v-if="test" class="baiKeBox clear">
          <!-- 了解MarkSimos -->
          <div class="markSimosBox1">

            <div class="markSimos-titleBox">
              <h2>如果你是初次接触MarkSimos，推荐观看以下视频：</h2>
              <div class="markSimos-title">
                <div class="title-left"></div>
                <div class="title-right">
                  <p>了解MarkSimos</p>
                  <p>Know about MarkSimos</p>
                </div>
              </div>              
            </div>

            <div class="marksimos-content">
              <ul>
                <li v-for="(allList,index) in allLists" :key="allList.id"
                >
                  <div class="reviewLeft" @mouseenter="allPlay($event)" @mouseleave="allPlay($event)" @click="showModal(allList,index)"> 
                    <video :src="allList.linkAddress" muted
                           :poster="allList.picUrl"        
                    ></video>
                    <img src="../../static/image/icon-video-play.png" alt="" class='play'>
                  </div>
                  <div class="videoTitle">
                    <h3>{{allList.videoName}}</h3>
                    <p>{{allList.description}}</p>
                  </div>
                </li>
                
              </ul>
            </div>
            <!-- 视频播放弹框 -->
            <div v-show="modalShow" class="modalVideo">
              <img class="modalImg" src="../../static/image/back.png" @click="closeModalShow()">
              <!-- <img class="modalImg" src="../../static/image/back.png" @click="modalShow = !modalShow"> -->
              <video id="modal-video" 
                :src="linkAddress" controls autoplay style="width:100%"
                
                ></video>
            </div>
            <!-- 视频播放弹框 end-->
            <!-- 弹框半透明背景 -->
            <div v-show="modalShow" @click="modalShow = !modalShow" class="modalMask"></div>
            <!-- 弹框半透明背景 end-->            
          </div>
          <!-- 了解MarkSimos end-->

          <!-- 理论工具 -->
          <div class="theories-tools">
            <div class="markSimos-titleBox">
              <h2>如果你还想了解更多：</h2>
              <div class="markSimos-title">
                <div class="title-left"></div>
                <div class="title-right">
                  <p>理论工具</p>
                  <p>Theories Tools</p>
                </div>
              </div>              
            </div>
            <div class="tools-line">
              <ul>
                <li class="clear" v-for="item in toolsData" :key="item.id">
                    <div class="line-title">
                      <div class="title-left">
                        <h3>{{item.title}}</h3>
                        <div class="introduce-line"></div>
                      </div>
                      <div class="title-right" v-for="tag in item.tags" :key="tag.id">
                        <span>{{tag.tagName}}</span>
                      </div>
                    </div>
                    <div class="line-more clear">
                      <!-- <router-link to="toolList">查看更多 》</router-link> -->
                      <a>查看更多 》</a>
                    </div>
                    <div class="line-content">
                      {{item.content}}
                    </div>
                </li>
              </ul>
              <!-- page -->
              <el-pagination background layout="prev, pager, next" :total="toolsDataTotal" @current-change="handleCurrentChange"></el-pagination>
              <!-- page end-->
            </div>
          </div>
          <!-- 理论工具 -->


          <!-- 相关词条 -->
          <div class="encyclopedia">
            <div class="markSimos-titleBox">
              <h2></h2>
              <div class="markSimos-title">
                <div class="title-left"></div>
                <div class="title-right">
                  <p>相关词条</p>
                  <p>Encyclopedia</p>
                </div>
              </div>              
            </div>
            <div class="ency-list">
              <ul>
                <li v-for="terms in termsData" :key="terms.id">
                  <router-link :to="{name:'industry-related', params:{id:terms.id}}">
                  <!-- <router-link :to="{name:'industry-related',params:{id:123}}"> -->
                    <div class="listImg">
                      <img :src="terms.picUrl" alt="">
                       <!-- tip -->
                       <div class="listBox">
                          <div class="list-tipAll">
                            <div class="tipContent">
                              <div class="tipTile">
                                <h3>{{terms.entryType}}</h3>
                                <p>{{terms.englishEntryType}}</p>
                                <div></div>
                            </div>
                            <div class="tipBtn">点击进入</div>
                            </div>
                          </div>
                       </div>
                      <!-- tip end-->
                    </div>
                    
                   
                    <div class="ency-title">
                      <h3>{{terms.entryType}}</h3>
                      <p class="ency-words">{{terms.englishEntryType}}</p>
                      <div class="ency-line"></div>
                    </div>
                    <p>{{terms.introduction}}</p>
                  </router-link>
                </li>
              </ul>
              
            </div>
          </div>
          <!-- 相关词条 end-->
        </div>
        <!-- mainBox end-->
      <!-- <router-view></router-view> -->
      <!-- </div> -->
  </div>
</template>
<script>
  import userNav from '../components/userNav.vue'
  export default {
    components:{
      userNav:userNav
    },
    data(){
      return{
       wordSearch:'',
       test:true,
       // 视频列表
       allLists:[],
       modalShow:false,
       linkAddress:'',
       modalVideo:{},
       listVideo:{},
       
        toolsData:[],
       // 总条数
       toolsDataTotal:0,
      
       // 词条
       termsData:[]
      }
    },
    methods:{
      // 获取理论工具所有数据 THEORIES TOOLS
      getTheoriesData:function(currentPage = 1){
        let data = {
          // 当前页码
          pageNow:currentPage,
          // 每页显示数据条数
          pageSize:3,

        }
        this.$http.theoriesTools(data,(res)=>{
          this.toolsData = res.data.theoryList;
          this.toolsDataTotal = res.data.count;
          console.log(res)
          console.log(this.toolsDataTotal)
        },(errorRes)=>{
          console.log(errorRes)
        })

      },
      // 当前页事件
      handleCurrentChange:function(currentPage){
        this.getTheoriesData(currentPage)
      },

      // 相关词条
      getAllEntryType:function(){
        this.$http.allEntryType(null,(res)=>{
          this.termsData = res.data
          console.log(res)
        },(errorRes)=>{
          console.log(errorRes)
        })
      },
      
      
      // 获取视频
      getMarkSimosVideo(){
        this.$http.markSimosVideo(null,(res)=>{
          this.allLists = res.data;
          console.log(res)
        },(errRes)=>{
          console.log(errRes);
        })
      },
      // 鼠标移入移出播放
      allPlay: function (event) {
        this.listVideo = event.currentTarget.firstChild;
        this.listVideo.currentTime = 0;
        if (this.listVideo.paused) {
          this.listVideo.play()
        }else{
          this.listVideo.pause()
        }
      },
      // 点击播放视频 
      showModal: function(allList,index){
        let data={
          id:allList.id
        }
        this.$http.playCount(data,(res)=>{
          // this.allLists 索引和 页面元素数量一致，索引必定一致，根据索引来更改相应位置的次数
          this.allLists[index].playCount = res.data.playCount;
          // console.log(res)
        },(errRes)=>{
          console.log(errRes)
        })
        this.modalVideo = document.getElementById('modal-video')
        this.modalShow = this.modalShow?false:true;
        this.linkAddress = allList.linkAddress
      },
      // 关闭视频弹窗
      closeModalShow:function(){
        this.modalShow = false;
        //location.reload();
      }

      
      
    },
    created(){

    },
    mounted(){
      this.getTheoriesData();
      this.getAllEntryType();
      this.getMarkSimosVideo();
       
    },
    watch: {
      modalShow: function(newValue,oldValue){
        this.listVideo.currentTime,this.modalVideo.currentTime = 0
        if (newValue == false) {
          this.modalVideo.muted = true;
        } else {
          this.modalVideo.muted = false;
        }
      }
    },    
    // beforeUpdate(){
    //   if (this.$route.name == 'industry-related') {
    //     this.test = false;
    //   }else{
    //     this.test = true;
    //   }
    // }
  }
</script>

